import {onBeforeRouteUpdate, useRoute, useRouter} from "vue-router";
import {useCookies} from "@vueuse/integrations/useCookies";

export const useTabs = () => {
    const route = useRoute();
    const router = useRouter();
    const cookie = useCookies()
    const currentTab = ref(route.path)

    const tabList = ref([
        {
            title: "分析页",
            icon: 'DataAnalysis',
            path: "/analytics",
            i18n: 'Analytics',
        }
    ])

    const addTab = (tab) => {

        const hasCurrentTab = tabList.value.findIndex((t) => t.path === tab.path) !== -1;
        if (!hasCurrentTab) tabList.value.push(tab)
        // 把标签列表存入cookie
        cookie.set("tabList", tabList.value)
    }

    const initTabList = () => {
        const tabs = cookie.get("tabList")
        if (tabs) tabList.value = tabs
    }

    initTabList()

    onBeforeRouteUpdate((to) => {
        currentTab.value = to.path
        addTab({
            path: to.path,
            icon: to.meta.icon,
            title: to.meta.title,
            i18n: to.name
        })
    })

    const changeTab = (tab) => {
        currentTab.value = tab;
        // 路由跳转为什么没生效???
        // router.push(tab)
    }

    const closeCurrentTab = (tab) => {
        const tabs = tabList.value

        let activeTab = currentTab.value

        if (activeTab === tab) {
            tabs.forEach((item, index) => {
                if (item.path === tab) {
                    const nextTab = tabs[index + 1] || tabs[index - 1]
                    if (nextTab) activeTab = nextTab.path

                }
            })
        }
        currentTab.value = activeTab

        tabList.value = tabList.value.filter(t => t.path !== tab)
    }
    const getCurrentTabIndex = () => {
        const currentTab = route.path
        return tabList.value.findIndex(item => item.path === currentTab)
    }

    const removeTab = (tab) => {
        closeCurrentTab(tab)

        cookie.set("tabList", tabList.value)
    }

    const handleBeforeLeave = async (activeName: TabPaneName, oldActiveName: TabPaneName) => {
        // const To = tabList.value.find((item) => item.path === activeName);
        // if (To) {
        //     console.log({
        //         to: To.title,
        //         from: oldActiveName,
        //     });
        // }
        // 这里为什么又生效了???
        await router.push(activeName)
    }
    // TODO: 优化局部组件刷新
    const handleRefresh = () => location.reload()

    const handleCloseTab = (type) => {
        if (type === 'closeAll') {
            currentTab.value = '/';

            tabList.value = [{
                title: "分析页",
                path: "/analytics",
                i18n: 'Analytics',
            }]
        }
        if (type === 'closeOther') tabList.value = tabList.value.filter(tab => tab.path === '/analytics' || tab.path === currentTab.value)

        if (type === 'closeCurrent') closeCurrentTab(route.path)

        if (type === 'closeRight') {
            const currentIndex = getCurrentTabIndex()

            tabList.value.splice(currentIndex + 1)
        }
        if (type === 'closeLeft') {
            const currentIndex = getCurrentTabIndex()

            tabList.value.splice(1, currentIndex - 1)
        }

        cookie.set("tabList", tabList.value)
    }

    const closeDisabled = (type) => {
        const index = getCurrentTabIndex()
        if (type === 'closeAll') {
            return !(tabList.value.length >= 2)
        } else if (type === 'closeOther') {
            return !(tabList.value.length >= 3)
        } else if (type === 'closeRight') {
            return !(index + 1 < tabList.value.length)
        } else if (type === 'closeLeft') {
            return !(index >= 2)
        } else {
            return
        }
    }

    return {
        currentTab,
        tabList,
        changeTab,
        removeTab,
        handleCloseTab,
        handleBeforeLeave,
        handleRefresh,
        closeDisabled
    }
}